<template>
    <div id="cesium-container">
    </div>
</template>
  
<script>
export default {
    name: 'Atmosphere',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("cesium-container", {
                terrainProvider: new window.Cesium.CesiumTerrainProvider({
                    url: 'http://data.mars3d.cn/terrain',
                    requestWaterMask: true,
                    requestVertexNormals: true
                }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: false,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });

            window.viewer.scene.globe.enableLighting = true//开启光照

            function planeFromTwoPoints(point1, point2, negate = false) {
                // const p1p2 = window.Cesium.Cartesian3.subtract(
                //     point2,
                //     point1,
                //     new window.Cesium.Cartesian3()
                // )
                // const cross = window.Cesium.Cartesian3.cross(point1, p1p2, new window.Cesium.Cartesian3())
                // const normal = window.Cesium.Cartesian3.normalize(cross, new window.Cesium.Cartesian3())
                // if (negate) {
                //     window.Cesium.Cartesian3.negate(normal, normal)
                // }
                // return window.Cesium.Plane.fromPointNormal(point1, normal)
                const cross = window.Cesium.Cartesian3.cross(point1, point2, new window.Cesium.Cartesian3())
                const normal = window.Cesium.Cartesian3.normalize(cross, new window.Cesium.Cartesian3())
                if (negate) {
                    window.Cesium.Cartesian3.negate(normal, normal)
                }
                return window.Cesium.Plane.fromPointNormal(point1, normal)
            }
            let temp = planeFromTwoPoints({
                "x": -1707124.0568380333,
                "y": -7426590.982145754,
                "z": 5401045.661234158
            }, {
                "x": 719333.0822182873,
                "y": -5797523.166624553,
                "z": 3193324.4401887525
            })
            console.log(temp)
//             {
//     "x": 0.39120997329914375,
//     "y": 0.48077781679318937,
//     "z": 0.784733998034275
// }

            //雾
            // window.viewer.scene.fog.enabled = true//开启雾效果
            // window.viewer.scene.fog.minimumBrightness = 0.1//雾效果最小亮度
            // window.viewer.scene.fog.density = 0.0003//浓度

            //地表大气效果
            // window.viewer.scene.globe.showGroundAtmosphere = true//开启地表大气效果
            // window.viewer.scene.globe.atmosphereLightIntensity = 10//设置地表大气亮度

            //天空大气效果
            // window.viewer.scene.skyAtmosphere.show=true
            // window.viewer.scene.skyAtmosphere.atmosphereLightIntensity=50//天空大气效果亮度

            //HDR效果
            // window.viewer.scene.highDynamicRange=true
        }
    }
}
</script>
  
<style>
#cesium-container {
    width: 100%;
    height: 100%;
}
</style>
  